<template>
	<view>
		<view  style="padding: 20rpx;border-bottom: 1rpx solid #dedede; background-color: #fff;margin-bottom: 20rpx;border-radius: 20rpx;"
			:class="{borderbottom:!showIdent}">
			<view class="right rowSpaceBetween mtb30" @click="open">
				<view class="rowCenter" style="gap: 10rpx;">
					<view v-if="mode == 'top'">
						<image class="img80rpx" v-if="index < 3" :src="`/static/image/top${index + 1}.png`"
							mode="widthFix"></image>
						<view v-if="index > 2" class="rankIndex rowCenter fontWeight">
							{{index + 1}}
						</view>
					</view>
					<view v-if="mode != 'top'">
						<image class="img80rpx" src="/static/image/defultUser.png" mode="widthFix"></image>
					</view>
					<view class="rankName fontWeight">
						{{items.nickName}}
					</view>
				</view>
				<view class="ident fontWeight" v-if="showIdent">
					代理商
				</view>
				<uv-icon v-if="!showIdent" :name="isShow ? 'arrow-up':'arrow-down'"></uv-icon>
			</view>

			<view class="w100 mtb20 rowSpaceAround">
				<view>
					<view class="cardTitle">
						{{items.tradeAmount.title}}
					</view>
					<view class="cardTips">
						{{items.tradeAmount.value?items.tradeAmount.value.toFixed(2):'0.00'}}
					</view>
				</view>
				<view>
					<view class="cardTitle">
						{{items.tradeQuantity.title}}
					</view>
					<view class="cardTips">
						{{items.tradeQuantity.value}}
					</view>
				</view>

			</view>
			<uv-transition :show="showIdent ||  isShow" :mode="['fade','zoom-in']" @change="change">
				<view class="w100 cardContiner" style="background-color:var(--themeDefultBackground)">
					<view class="w100 mtb20" style="flex-wrap: wrap;display: flex;padding-left: 50rpx;">
						<view style="width: 33%;">
							<view class="cardTitle" style='font-size: 12rpx;color: #999;'>
								{{items.newStoreQuantity.title}}
							</view>
							<view class="cardTitle fontWeight">
								{{items.newStoreQuantity.value}}
							</view>
						</view>
						<view style="width: 33%;">
							<view class="cardTitle" style='font-size: 12rpx;color: #999;'>
								{{items.storeQuantity.title}}
							</view>
							<view class="cardTitle fontWeight">
								{{items.storeQuantity.value}}
							</view>
						</view>
						<view style="width: 33%;">
							<view class="cardTitle" style='font-size: 12rpx;color: #999;'>
								{{items.hotStoreQuantity.title}}
							</view>
							<view class="cardTitle fontWeight">
								{{items.hotStoreQuantity.value}}
							</view>
						</view>
						<view style="width: 33%;">
							<view class="cardTitle" style='font-size: 12rpx;color: #999;'>
								{{items.predictAgencyAmount.title}}
							</view>
							<view class="cardTitle fontWeight">
								{{items.predictAgencyAmount.value?items.predictAgencyAmount.value.toFixed(2):'0.00'}}
							</view>
						</view>
						<view style="width: 33%;">
							<view class="cardTitle" style='font-size: 12rpx;color: #999;'>
								{{items.predictAmount.title}}
							</view>
							<view class="cardTitle fontWeight">
								{{items.predictAmount.value?items.predictAmount.value.toFixed(2):'0.00'}}
							</view>
						</view>
					</view>
				</view>
			</uv-transition>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'

	const props = defineProps({
		items: {
			type: String,
		},
		//top为排行榜模式
		mode: {
			type: String,
			default: ''
		},
		index: {
			type: Number,
		},
		//是否显示代理商标识
		showIdent: {
			type: Boolean,
			default: false
		}
	})

	const isShow = ref(false)
	const open = () => {
		if (props.showIdent) {
			return;
		}
		isShow.value = !isShow.value
		console.log(11);
	}
	const change = (e) => {
		console.log(e)
	}
</script>
<style lang="scss">
	.rankName {
		font-size: 32rpx;
	}

	.rankIndex {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		box-sizing: border-box;
		color: var(--themeFontColor9);
		background: var(--homePageBackground);
		font-size: 42rpx;
	}

	.ident {
		font-size: 26rpx;
		padding: 10rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(#fb5f46, 0.2);
		color: var(--themeDefultFontColor);
	}
</style>